<template>
  <div class="workOrder app-container">
    <el-form :model="queryFrom" class="flex">
      <el-form-item class="mr-15px">
        <el-input
          v-model="queryFrom.theme"
          placeholder="输入工单主题"
          clearable
          @change="getList"
        ></el-input>
      </el-form-item>
      <el-form-item class="mr-15px">
        <el-input
          v-model="queryFrom.num"
          placeholder="输入工单编号"
          clearable
          @change="getList"
        ></el-input>
      </el-form-item>
      <el-form-item class="mr-15px">
        <el-date-picker
          v-model="queryFrom.createTime"
          type="daterange"
          placeholder="创建时间"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable
          @change="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList"
          ><el-icon class="mr-5px"><Search /></el-icon>查询</el-button
        >
        <el-button @click="reset"
          ><el-icon class="mr-5px"><Refresh /></el-icon>重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row class="mb-20px">
      <el-col :span="12">
        <el-button type="primary" @click="getoPage('add')">新建工单</el-button>
        <el-button @click="getoPage('edit')" :disabled="seletedLength"
          >编辑工单</el-button
        >
        <el-button :disabled="deleteBtn" @click="deleteOrder"
          >删除工单</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      v-loading="loading"
      @row-dblclick="handleDblClick"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="num" label="工单编号" />
      <el-table-column prop="theme" label="工单主题" />
      <el-table-column prop="address" label="工单类型" align="center">
        <template #default="scoped">
          <div>
            {{ work_order_type.find(v => v.value == scoped.row.type)?.label }}
          </div>
        </template></el-table-column
      >
      <el-table-column prop="level" label="级别" align="center">
        <template #default="scoped">
          <div>
            {{ work_order_level.find(v => v.value == scoped.row.level)?.label }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="processState" label="状态" align="center" />
      <el-table-column prop="address" label="关联任务">
        <template #default="scoped">
          <div>
            <el-button
              plain
              text
              type="primary"
              @click="
                () => {
                  if (scoped.row.linkTaskNum === '0') {
                    return
                  }
                  router.push({
                    path: 'taskManage',
                    query: { id: scoped.row.id }
                  })
                }
              "
              >{{ scoped.row?.linkTaskNum || '' }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryFrom.pageNum"
      v-model:limit="queryFrom.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { workOrderList, workOrderDelete } from '@/api/rsgl/order'
import {
  work_order_type,
  work_order_level,
  system_or_project_name,
  related_products
} from '@/hooks/dict/business'
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const router = useRouter()
const queryFrom = ref({ pageNum: 1, pageSize: 10 }) // 查询参数
const tableData = ref([]) // 表格数据

const loading = ref(false)
function init() {
  getList()
}
init()
const total = ref(10) // 分页数
// 获取数据
function getList() {
  loading.value = true
  const datas = { ...queryFrom.value }
  if (datas.createTime) {
    datas.startTime = datas.createTime[0]
    datas.endTime = datas.createTime[1]
    delete datas.createTime
  }
  workOrderList(datas)
    .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
    })
    .finally(() => {
      loading.value = false
    })
}

function reset() {
  queryFrom.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 跳转方法
function getoPage(type) {
  if (type === 'add') {
    router.push('addOrder')
  } else {
    if (selectRow.value[0].processState === '审批通过') {
      proxy.$modal.msgWarning('当前工单已完成审批，不支持编辑')
      return
    }
    if (selectRow.value[0].processState !== '流程未发起') {
      proxy.$modal.msgWarning('当前工单流程已发起，不支持编辑')
      return
    }
    router.push({
      path: 'editOrder',
      query: {
        id: selectRow.value[0].id,
        procInsId: selectRow.value[0].processId
      }
    })
  }
}

function handleDblClick(row) {
  console.log(row)
  router.push({
    path: 'detailOrder',
    query: { id: row.id, procInsId: row.processId }
  })
}
// 删除
function deleteOrder() {
  if (deleteBtn.value) return
  proxy.$modal.confirm('是否确实删除数据').then(() => {
    workOrderDelete(selectRow.value[0].id).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  })
}
const selectRow = ref([])
const seletedLength = computed(() => selectRow.value.length !== 1)
console.log(userStore.roles, userStore.roles.indexOf('admin') > -1, 'userStore')
const deleteBtn = computed(() => {
  if (selectRow.value.length !== 1) {
    return true
  }
  if (userStore.roles.indexOf('admin') > -1) {
    return false
  } else {
    return ['申请人', '流程未发起'].indexOf(selectRow.value[0].processState) < 0
  }
})
// 选择行
function handleSelectionChange(val) {
  console.log(val, '表格选择内容')
  selectRow.value = val
}
</script>

<style scoped lang="scss">
.workOrder {
}
</style>
